<script setup>
import { ref, watch} from 'vue'
import { useMouseInElement } from '@vueuse/core'

defineOptions({ name:"ImageIndex" })

// 1、拿到蒙层的盒子
const target = ref(null)
const { elementX, elementY,isOutside } = useMouseInElement(target)
 defineProps({
    BigList: Array
})
const activeIndex = ref(0)
const enter = (id) => {
    activeIndex.value = id
}
    // left:距离左边的距离
    const left = ref(0)
    // top：距离上边的距离
    const top = ref(0)

     // 大图的X,Y坐标
    const positionX = ref(0)
    const positionY = ref(0)
    // 3事件监听
    watch([elementX, elementY],()=>{
        // 如果鼠标在中等盒子里面移动（isOutside.value的值为true）才去执行后边的逻辑
        if(isOutside.value) return
        //  (1)有效范围内控制滑块的距离
        if(elementX.value > 82.5 && elementX.value < 247.5) {
            left.value = elementX.value - 82.5
        }
        if(elementY.value > 82.5 && elementY.value < 247.5) {
            top.value = elementY.value - 82.5
        }
        // （2）边界控制
        if(elementX.value > 247.5) {left.value = 165}
        if(elementX.value < 82.5) {left.value = 0}
        
        if(elementY.value > 247.5) {top.value = 165}
        if(elementY.value < 82.5) {top.value = 0}

        // 控制大图
        positionX.value = -left.value * 2
        positionY.value = -top.value * 2
    })
 </script>
<template>
    <!-- <div>{{ elementX }} , {{ elementY }},{{ isOutside  }}</div> -->
    <div class="img" v-if="BigList">
        <div class="big" ref="target">
            <!-- 蒙层区域 -->
            <div class="black" :style="{left: `${left}px`, top: `${top}px`}" v-show="isOutside === false"></div>
            <img :src="BigList[activeIndex]" alt="" width="100%" height="100%">
            <div class="large"  :style="{ 
                backgroundImage:`url(${BigList[activeIndex]})`, backgroundPositionX:`${positionX}px`,backgroundPositionY:`${positionY}px`
            }" v-show="isOutside === false"></div>
        </div>
        <ul class="small" >
            <li v-for="(item,index) in BigList" :key="index"  @mouseenter="enter(index)" :class="{ active: index === activeIndex }">
               <img :src="item" alt="" width="100%" height="100%">
            </li>
        </ul>       
    </div>
</template>
<style scoped>
.black{
    position: absolute;
    width: 165px;
    height: 165px;
    background-color: black;
    opacity: .4;
    /* display: none; */
     cursor: move;
}
.img{
     display: flex;
     justify-content: space-between;
     width: 400px;
     height: 330px;
    }
.big{
    
    width: 330px;
    height: 100%;
    }
.small{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.small li{
    width: 55px;
    height: 55px;
    background-color: green;
}
.active{
    border: 2px solid #27bb9a;
}
.large{
    position: absolute;
    top: 0px;
    left: 345px;
    width: 330px;
    height: 330px;
    z-index: 1;
}
</style>